<template>
  <view class="ming-gong">
    <canvas class="myCanvas" canvas-id="myCanvas" id="myCanvas" ref="myCanvas"></canvas>
  </view>
</template>
<script>
  export default {
    props: {
      minggongInfo: {
        type: Object,
        default: {}
      }
    },
		watch: {
			minggongInfo: {
				handler(newVal) {
          this.minggongIndex = newVal.minggongIndex;
          this.sanheIndex = newVal.sanheIndex;
          this.$nextTick(() => {
            this.draw()
          })
				},
				deep: true,
        immediate: true
			}
		},
    data() {
      return {
        minggongIndex: undefined,
        sanheIndex:  undefined,
        minggongLine: [
          // 子
          [{width: 3/4, height: 1}, {width: 1/4, height: 0}],
          // 丑
          [{width: 1/4, height: 1}, {width: 3/4, height: 0}],
          // 寅
          [{width: 0, height: 1}, {width: 1, height: 0}],
          // 卯
          [{width: 0, height: 3/4}, {width: 1, height: 1/4}],
          // 辰
          [{width: 0, height: 1/4}, {width: 1, height: 3/4}],
          // 巳
          [{width: 0, height: 0}, {width: 1, height: 1}],
        ],
        sanheLine: [
          // 申子辰
          [
              {width: 1, height: 0},
              {width: 3/4, height: 1},
              {width: 0, height: 1/4}
          ],
          // 巳酉丑
          [
              {width: 0, height: 0},
              {width: 1, height: 1/4},
              {width: 1/4, height: 1}
          ],
          // 寅午戌
          [
              {width: 0, height: 1},
              {width: 1/4, height: 0},
              {width: 1, height: 3/4}
          ],
          // 亥卯未
          [
              {width: 1, height: 1},
              {width: 0, height: 3/4},
              {width: 3/4, height: 0}
          ]
        ]
      }
    },
    mounted() {
      this.draw()
    },
    methods: {
      draw() {
        if (this.minggongIndex != undefined) {
          let width = this.$refs.myCanvas.$el.offsetWidth;
          let height = this.$refs.myCanvas.$el.offsetHeight;
          // 获取宽高
          var ctx = uni.createCanvasContext('myCanvas');
          ctx.clearRect(0, 0, width, height);
          ctx.strokeStyle = "#787878";
          ctx.setLineDash([3,3]);
          
          // 获取位置信息
          let minggongLine = this.minggongLine[this.minggongIndex];
          let sanheLine = this.sanheLine[this.sanheIndex];
          
          // 命宫线
          ctx.moveTo(minggongLine[0].width * width, minggongLine[0].height * height);
          ctx.lineTo(minggongLine[1].width * width, minggongLine[1].height * height);
          ctx.stroke();
          
          // 三和线
          ctx.moveTo(sanheLine[0].width * width, sanheLine[0].height * height);
          ctx.lineTo(sanheLine[1].width * width, sanheLine[1].height * height);
          ctx.lineTo(sanheLine[2].width * width, sanheLine[2].height * height);
          ctx.lineTo(sanheLine[0].width * width, sanheLine[0].height * height);
          ctx.stroke();
          ctx.draw();          
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
.ming-gong {
  width: 100%;
  height: 100%;
  .myCanvas {
    width: 100%;
    height: 100%
  }
}
</style>